<template>
	<view class="container">
		<!-- 顶部状态栏占位 -->
		<view class="status-bar"></view>

		<!-- 标题栏 -->
		<view class="header">
			<!-- 返回按钮 -->
			<text @tap="goBack" class="iconfont icon-fanhui"></text>
			
			<!-- 天禅境资讯标题 -->
			<text class="title-text">禅心问道</text>
			
			<view class="header-icons">
				<text @tap="handleNavClick('search')" class="iconfont icon-sousuo"></text>
			</view>
		</view>

		<!-- 资讯类别选择 -->
		<scroll-view class="category-scroll" scroll-x="true" show-scrollbar="false" enhanced="true" :scroll-into-view="'category-' + currentCategory">
			<view class="category-container">
				<view 
					class="category-item" 
					v-for="(item, index) in categories" 
					:key="index" 
					:id="'category-' + item.id"
					:class="{ active: currentCategory === item.id }"
					@tap="switchCategory(item.id)"
				>
					<text>{{ item.name }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 顶部焦点文章 -->
		<view class="focus-article" v-if="focusArticle" @tap="navigateToDetail(focusArticle.id)">
			<image :src="focusArticle.image" mode="aspectFill" class="focus-image"></image>
			<view class="focus-overlay"></view>
			<view class="focus-content">
				<view class="focus-tag" v-if="focusArticle.tag">{{ focusArticle.tag }}</view>
				<text class="focus-title">{{ focusArticle.title }}</text>
				<view class="focus-meta">
					<text class="focus-author">{{ focusArticle.author }}</text>
					<text class="focus-date">{{ focusArticle.date }}</text>
				</view>
			</view>
		</view>

		<!-- 文章列表 -->
		<view class="article-list">
			<!-- 头条文章（横向布局） -->
			<view class="headline-article" v-if="headlineArticle" @tap="navigateToDetail(headlineArticle.id)">
				<image :src="headlineArticle.image" mode="aspectFill" class="headline-image"></image>
				<view class="headline-content">
					<view class="headline-tag" v-if="headlineArticle.tag">{{ headlineArticle.tag }}</view>
					<text class="headline-title">{{ headlineArticle.title }}</text>
					<text class="headline-summary">{{ headlineArticle.summary }}</text>
					<view class="headline-meta">
						<text class="headline-author">{{ headlineArticle.author }}</text>
						<text class="headline-date">{{ headlineArticle.date }}</text>
					</view>
				</view>
			</view>

			<!-- 横向分割线 -->
			<view class="divider">
				<view class="divider-line"></view>
				<view class="divider-text">精选文章</view>
				<view class="divider-line"></view>
			</view>

			<!-- 普通文章列表 -->
			<view 
				class="article-item" 
				v-for="(item, index) in articleList" 
				:key="index"
				@tap="navigateToDetail(item.id)"
			>
				<view class="article-content">
					<view class="article-tag" v-if="item.tag">{{ item.tag }}</view>
					<text class="article-title">{{ item.title }}</text>
					<text class="article-summary">{{ item.summary }}</text>
					<view class="article-meta">
						<text class="article-author">{{ item.author }}</text>
						<text class="article-date">{{ item.date }}</text>
						<text class="article-views"><text class="iconfont icon-liulan"></text> {{ item.views }}</text>
					</view>
				</view>
				<image :src="item.image" mode="aspectFill" class="article-image"></image>
			</view>

			<!-- 加载更多 -->
			<view class="load-more" v-if="hasMoreArticles" @tap="loadMoreArticles">
				<text class="load-more-text">加载更多</text>
				<text class="iconfont icon-xiala"></text>
			</view>
			<view class="end-line" v-else>
				<text class="end-line-text">~ 禅境尽头 ~</text>
			</view>
		</view>

		<!-- 底部导航栏占位 -->
		<view class="bottom-space"></view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentCategory: 'all',
			categories: [
				{ id: 'all', name: '全部' },
				{ id: 'wisdom', name: '禅心智慧' },
				{ id: 'life', name: '修行生活' },
				{ id: 'culture', name: '禅宗文化' },
				{ id: 'event', name: '活动资讯' },
				{ id: 'product', name: '产品故事' },
				{ id: 'history', name: '禅宗历史' },
				{ id: 'master', name: '大师开示' },
				{ id: 'practice', name: '日常修行' },
				{ id: 'travel', name: '禅意旅行' }
			],
			focusArticle: {
				id: '1001',
				title: '禅修的艺术：寻找内心的宁静之道',
				author: '明海法师',
				date: '2025-05-02',
				tag: '禅心智慧',
				image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
			},
			headlineArticle: {
				id: '1002',
				title: '茶道与禅修：一杯茶里的整个宇宙',
				summary: '茶道不仅是一门技艺，更是一种修行。本文带您领略禅茶一味的深刻内涵...',
				author: '慧远',
				date: '2025-05-04',
				tag: '修行生活',
				image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
			},
			articleList: [
				{
					id: '1003',
					title: '五月禅境音乐会：聆听心灵的声音',
					summary: '一场融合传统禅乐与现代音乐的盛宴，带您进入心灵深处的宁静世界...',
					author: '天禅境',
					date: '2025-05-06',
					tag: '活动资讯',
					views: '1.2k',
					image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
				},
				{
					id: '1004',
					title: '曼陀罗香炉：传承千年的禅意香道',
					summary: '每一缕香气都是一次心灵的洗礼，每一刻静谧都是一次与自我的对话...',
					author: '净空',
					date: '2025-05-05',
					tag: '产品故事',
					views: '857',
					image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
				},
				{
					id: '1005',
					title: '从《金刚经》看生活智慧：舍与得的辩证',
					summary: '佛陀的教诲如何指导我们在现代社会中保持内心平静与智慧...',
					author: '法明',
					date: '2025-05-03',
					tag: '禅宗文化',
					views: '2.3k',
					image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
				}
			],
			hasMoreArticles: true
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		handleNavClick(type) {
			if (type === 'search') {
				uni.navigateTo({
					url: '/pages/news/search',
					animationType: 'slide-in-right'
				});
			}
		},
		switchCategory(categoryId) {
			this.currentCategory = categoryId;
			// 这里可以调用API获取对应分类的文章
			uni.showLoading({
				title: '加载中...'
			});
			
			setTimeout(() => {
				uni.hideLoading();
				// 模拟数据更新
				if (categoryId !== 'all') {
					this.articleList = this.articleList.filter(article => article.tag === this.categories.find(c => c.id === categoryId).name);
				} else {
					// 恢复全部文章
					// 实际应用中应该重新调用API获取所有文章
				}
			}, 500);
		},
		navigateToDetail(id) {
			uni.navigateTo({
				url: `/pages/news/detail?id=${id}`
			});
		},
		loadMoreArticles() {
			uni.showLoading({
				title: '加载中...'
			});
			
			// 模拟加载更多文章
			setTimeout(() => {
				uni.hideLoading();
				
				// 添加更多文章（实际应用中应从API获取）
				const moreArticles = [
					{
						id: '1006',
						title: '禅意花艺：让心灵与自然对话',
						summary: '花道不仅是一种插花技艺，更是对生命的感悟与对自然的尊重...',
						author: '觉悟',
						date: '2025-05-01',
						tag: '修行生活',
						views: '965',
						image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
					},
					{
						id: '1007',
						title: '天禅境夏季禅修营：回归本心的旅程',
						summary: '为期七天的禅修营，带您远离尘嚣，探索内心世界的无限可能...',
						author: '天禅境',
						date: '2025-04-30',
						tag: '活动资讯',
						views: '1.5k',
						image: 'https://file.wykji.cn/uploads/20250504/8cfaa29e582b0f0d8ae5eb384c9e4b22.png'
					}
				];
				
				this.articleList = [...this.articleList, ...moreArticles];
				
				// 如果没有更多文章了
				if (this.articleList.length >= 7) {
					this.hasMoreArticles = false;
				}
			}, 800);
		}
	}
}
</script>

<style lang="scss">
/* 基础样式继承自主页面 */
@font-face {
	font-family: 'iconfont';
	/* Project id 4874541 */
	src: url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.woff2?t=1743246128509') format('woff2'),
		url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.woff?t=1743246128509') format('woff'),
		url('//at.alicdn.com/t/c/font_4874541_uez9gu2bi78.ttf?t=1743246128509') format('truetype');
}

.iconfont {
	font-family: "iconfont" !important;
	font-size: 16px;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 添加新的图标 */
.icon-fanhui:before {
	content: "\e604";
}

.icon-liulan:before {
	content: "\e6a1";
}

.icon-xiala:before {
	content: "\e65f";
}

.icon-sousuo:before {
	content: "\e627";
}

page {
	background-color: #F5F2EA; /* 米白色背景 */
	font-family: "思源宋体", serif;
}

.container {
	width: 100%;
}

.status-bar {
	height: var(--status-bar-height);
	width: 100%;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20rpx 30rpx;
}

.title-text {
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	font-size: 36rpx;
	color: #6A4C29; /* 檀木棕色 */
	flex: 1;
	text-align: center;
}

.header-icons {
	.iconfont {
		color: #6A4C29;
		font-size: 40rpx;
	}
}

/* 分类选择器 */
.category-scroll {
	width: 100%;
	white-space: nowrap;
	padding: 10rpx 0;
	background-color: #FFF;
	box-shadow: 0 4rpx 8rpx rgba(106, 76, 41, 0.08);
}

.category-container {
	display: inline-flex;
	padding: 0 20rpx;
	width: auto;
}

.category-item {
	display: inline-block;
	padding: 15rpx 25rpx;
	margin: 0 10rpx;
	font-size: 28rpx;
	color: #6A4C29;
	position: relative;
	transition: all 0.3s;
	flex-shrink: 0;

	&.active {
		color: #C8A675;
		font-weight: bold;
		
		&::after {
			content: '';
			position: absolute;
			bottom: 0;
			left: 30%;
			width: 40%;
			height: 6rpx;
			background-color: #C8A675;
			border-radius: 3rpx;
		}
	}
}

/* 焦点文章 */
.focus-article {
	margin: 30rpx;
	height: 400rpx;
	border-radius: 20rpx;
	overflow: hidden;
	position: relative;
	box-shadow: 0 8rpx 20rpx rgba(106, 76, 41, 0.15);
}

.focus-image {
	width: 100%;
	height: 100%;
}

.focus-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60%;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.focus-content {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30rpx;
}

.focus-tag {
	display: inline-block;
	padding: 6rpx 20rpx;
	background-color: #C8A675;
	color: #FFF;
	font-size: 24rpx;
	border-radius: 6rpx;
	margin-bottom: 15rpx;
}

.focus-title {
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	font-size: 36rpx;
	color: #FFF;
	line-height: 1.4;
	margin-bottom: 15rpx;
	text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
	display: block;
}

.focus-meta {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: rgba(255, 255, 255, 0.8);
}

.focus-author {
	margin-right: 20rpx;
}

/* 头条文章 */
.headline-article {
	margin: 30rpx;
	background-color: #FFF;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 6rpx 16rpx rgba(106, 76, 41, 0.1);
}

.headline-image {
	width: 100%;
	height: 250rpx;
}

.headline-content {
	padding: 20rpx;
}

.headline-tag {
	display: inline-block;
	padding: 6rpx 16rpx;
	background-color: rgba(200, 166, 117, 0.2);
	color: #6A4C29;
	font-size: 22rpx;
	border-radius: 6rpx;
	margin-bottom: 10rpx;
}

.headline-title {
	font-size: 32rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 10rpx;
	font-weight: bold;
	display: block;
}

.headline-summary {
	font-size: 26rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 15rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.headline-meta {
	display: flex;
	align-items: center;
	font-size: 24rpx;
	color: #999;
}

.headline-author {
	margin-right: 20rpx;
}

/* 分割线 */
.divider {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 30rpx;
	margin: 40rpx 0;
}

.divider-line {
	flex: 1;
	height: 2rpx;
	background-color: rgba(106, 76, 41, 0.2);
}

.divider-text {
	padding: 0 30rpx;
	font-family: "汉仪尚巍手书", "思源宋体", serif;
	color: #6A4C29;
	font-size: 32rpx;
}

/* 文章列表 */
.article-list {
	padding-bottom: 30rpx;
}

.article-item {
	margin: 20rpx 30rpx;
	padding: 20rpx;
	background-color: #FFF;
	border-radius: 15rpx;
	display: flex;
	box-shadow: 0 4rpx 12rpx rgba(106, 76, 41, 0.08);
}

.article-content {
	flex: 1;
	margin-right: 20rpx;
}

.article-tag {
	display: inline-block;
	padding: 4rpx 14rpx;
	background-color: rgba(200, 166, 117, 0.2);
	color: #6A4C29;
	font-size: 20rpx;
	border-radius: 4rpx;
	margin-bottom: 10rpx;
}

.article-title {
	font-size: 30rpx;
	color: #333;
	line-height: 1.4;
	margin-bottom: 10rpx;
	font-weight: bold;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.article-summary {
	font-size: 24rpx;
	color: #666;
	line-height: 1.5;
	margin-bottom: 15rpx;
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.article-image {
	width: 200rpx;
	height: 150rpx;
	border-radius: 10rpx;
	flex-shrink: 0;
}

.article-meta {
	display: flex;
	align-items: center;
	font-size: 22rpx;
	color: #999;
}

.article-author {
	margin-right: 15rpx;
}

.article-date {
	margin-right: 15rpx;
}

.article-views {
	display: flex;
	align-items: center;
	.iconfont {
		font-size: 22rpx;
		margin-right: 4rpx;
	}
}

/* 加载更多 */
.load-more {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30rpx 0;
	color: #6A4C29;
}

.load-more-text {
	font-size: 28rpx;
	margin-right: 10rpx;
}

.end-line {
	text-align: center;
	padding: 30rpx 0;
}

.end-line-text {
	font-size: 26rpx;
	color: #999;
	position: relative;
	display: inline-block;
	padding: 0 30rpx;
	
	&::before, &::after {
		content: '';
		position: absolute;
		top: 50%;
		width: 50rpx;
		height: 1rpx;
		background-color: rgba(153, 153, 153, 0.5);
	}
	
	&::before {
		left: -30rpx;
	}
	
	&::after {
		right: -30rpx;
	}
}

.bottom-space {
	height: 100rpx;
}
</style>